<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.la {
				width: 36px;
				height: 36px;
				border: #008000 solid 2px;
				float: left;
				margin: 10px;
				text-align: center;
				cursor: pointer;
				line-height: 36px;
			}

			.lb {
				color: red;
			}
		</style>
	</head>
	<body>
		<!-- Vue通过操作下标修改展示的内容,可循环 2021-7-27 -->
		<div id="app">
			{{list[ina]}} |
			{{list[ins]}} |
			{{list[inb]}} |

			<div class="la lb" @click="add">+</div>
			<div class="la" @click="red">-</div>
			<div>
				<input type="text" id="" v-model="ins" value="" />
			</div>
		</div>

		<script src="../../assets/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let vm = new Vue({
				el: "#app",
				data() {
					return {
						love: 'love',
						list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
						ins: 1,
						ina: 0,
						inb: 0,
					}
				},
				created() {
					this.csu();
				},
				methods: {
					add() {
						if (this.ins > this.list.length - 2) {
							this.ins = 0;
						} else {
							this.ins++;
						}
						this.csu();
					},
					red() {
						if (this.ins < 1) {
							this.ins = this.list.length - 1;
						} else {
							this.ins--;
						}
						this.csu();
					},
					csu() {
						this.ina = this.ins - 1 < 0 ? this.list.length - 1 : this.ins - 1;
						this.inb = this.ins > this.list.length - 2 ? 0 : this.ins + 1;
					}
				}
			})
		</script>
	</body>
</html>
